<template>
  <div class="page-container">
    <div class="body-container">
      <div class="nav-container">
        <img :src="navImg" />
      </div>
      <div class="content-container">
        <div class="year">2020年</div>
        <div class="mounth">11月</div>
        <div class="list">
          <div class="inline"></div>
          <div class="day-container">
            <span class="left-day">11-13</span>
            <span class="text left-title"
              >Vue生命周期1111111111111111111111111111</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import GoTop from '@inotom/vue-go-top'
import ApiService from '@/service/index'
import { formtTime } from '@/utils/tools'
import { IMG_URL } from '@/config/config'

const api = new ApiService();
export default {
  name:'FileViews',
  data(){
    return{
      navImg:IMG_URL+'filenav.png',
      listArray:[],
      limit:20,
      offset:0,
      yearArr:[]
    }
  },
  methods:{
    getEssayList(){
      this.listArray = await api.findEssay({limit:this.limit,offset:this.offset});
      let arr = this.listArray.reduce((prev,elem,index,arr)=>{
        let yearAll = elem.createdAt.substr(0,4);
        let isPush = prev.every((item)=>{
          return item !== yearAll;
        })
        if(isPush){
          prev.push(yearAll)
        }
      
        return prev;
      },[])
      console.log(arr);
      }
  },
  async created(){
  
  }
}
</script>
<style lang="scss" scoped>
$theme: #f2db4d;
.body-container {
  width: 1305px;
  height: 100%;
  margin: 0 auto;
}
.nav-container {
  width: 103px;
  height: 94px;
  margin-top: 43px;
  img {
    width: 100%;
    height: 100%;
  }
}
.content-container {
  width: 100%;
  height: 100%;
  margin-top: 50px;
  text-align: center;
  .year {
    font-size: 25px;
    font-weight: bold;
    width: 88px;
    margin: 0 auto;
  }
  .mounth {
    font-size: 18px;
    font-weight: bold;
    width: 45px;
    margin: 0 auto;
    margin-top: 23px;
  }
  .list {
    .inline {
      width: 5px;
      height: 50px;
      background-color: #000;
      margin: 0 auto;
    }
    .day-container {
      position: relative;
      .day {
        display: inline-block;
        width: 88px;
        text-align: center;
        margin: 0 auto;
        padding-left: 360px;
      }
      .left-day {
        display: inline-block;
        width: 88px;
        text-align: center;
        margin: 0 auto;
      }
      .text {
        cursor: pointer;
      }
      .left-title {
        position: absolute;
        right: 700px;
        text-align: right;
      }
      .text:hover {
        color: $theme;
      }
    }
  }
}
</style>